<template>
  <el-card class="box-card">
    <div>筛选搜索</div>
    <div>
      <el-button class='btn1' >重置</el-button>
      <el-button type="primary" @click="search">查询搜索</el-button>
    </div>
    <div class="three">
      <div>
        <span>广告名称:</span
        ><el-input
          v-model="input"
          placeholder="广告名称"
          clearable
          class="input"
        />
      </div>
      <div>
     
        <span>广告位置:</span
        ><el-select v-model="value" placeholder="广告位置" class="choose">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <div class="demo-date-picker">
        <div class="block">
          <span class="demonstration">到期时间：</span>
          <el-date-picker
            v-model="value2"
            type="date"
            placeholder="Pick a day"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
            :size="size"
          />
        </div>
      </div>
    </div>
  </el-card>

  <el-card class="box-card romote">
    <div class="two">
      <div>数据列表</div>
      <el-button @click="toaddAdvertise">添加广告</el-button>
    </div>
  </el-card>

  <div class="table">
    <!-- 数据的展示 -->
    <el-table :data="tableData.list " style="width: 100%" :border="true" :key="key" @selection-change="selectChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="编号" width="50" />
      <el-table-column prop="name" label="广告名称" width="100" />
      <el-table-column prop="type" label="广告位置" width="100" />

      <el-table-column prop="pic" label="广告图片" width="310">
        <template #default="scope">
          <img :src="scope.row.pic" alt="" />
        </template>
      </el-table-column>

      <!-- 自定义列模板 -->
      <el-table-column label="时间" width="180" prop="startTime,endTime">
        <!-- slot 插槽写法  scope就是作用域插槽 ， scope.row 就是数据 -->
        <template #default="scope">
          <div>
            开始时间：{{
              scope.row.startTime
                ? dayjs(scope.row.startTime).format("YYYY-MM-DD HH:mm:ss")
                : "/"
            }}
          </div>
          <div>
            到期时间：{{
              scope.row.endTime
                ? dayjs(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss")
                : "/"
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="上线/下线" width="80">
        <template #default="scope">
          <el-switch :value="scope.row.status === 1 ? true : false" />
        </template>
      </el-table-column>
      <el-table-column prop="clickCount" label="点击次数" width="90" />
      <el-table-column prop="orderCount" label="生成订单" width="110" />
      <el-table-column label="操作" width="170" flex="right">
        <template #default="scope">
          <div class="doublebtn">
            <el-button @click="write">编辑</el-button>
          <el-button @click="del(scope.row.id)">删除</el-button>
          </div>
        
        </template>
      </el-table-column>
    </el-table>
  </div>
  
  <div class="bottom">
  <el-select v-model="value3" placeholder="批量删除">
    <el-option
      v-for="item in options3"
      :key="item.value"
      :label="item.label"
      :value="item.value"

    />
   </el-select>
   <el-button type="primary" class="bbtn" @click="delall">确定</el-button>

   <div>
   
    <div class="demo-pagination-block">
 <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[5, 10, 20, 30]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</div>
   </div>
</div>
</template>

<script setup lang="ts">
import * as api from '../../request/api'


import type { IAdvertise,IHomeAdvertise,IHomeBrandDelete, } from "../../json/request/QmsAdminConreiller";
import { useRoute, useRouter } from "vue-router";

import { onMounted, reactive, ref,defineComponent, getCurrentInstance, Ref } from "vue";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from 'element-plus';


const value3 = ref('')
let tableData = ref([]) as any
let myid = ref(1)
const pageNum = ref('')
const pageSize = ref('')
let getAd = reactive({
  list: [],
});

onMounted(async () => {
    //发请求
  let res = await api.admin.homeAdvertise({
    pageNum:currentPage4.value,
pageSize:pageSize4.value,
 })
console.log(res);
//交给tableData


  myid = res.list.id
  tableData.value.list = res.list
  
})


const input = ref('')
const value = ref('')
const options = [
  {
    value: "Option1",
    label: "PC首页轮播",
  },
  {
    value: "Option2",
    label: "App首页轮播",
    disabled: true,
  },
  {
    value: "Option3",
    label: "胡浩小姐姐黑丝轮播",
  },
];

const options3 = [
  {
    value: 'Option1',
    label: '删除',
  },]
const size = ref<"default" | "large" | "small">("default");

const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: "Today",
    value: new Date(),
  },
  {
    text: "Yesterday",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "A week ago",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}


//分页
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let total = ref(0)
let list = ref([]);
let key = ref(1);
const { ctx: _this }: any = getCurrentInstance ()
//分页的请求
const handleSizeChange = async (val: number) => {
  pageSize4.value = val
  let res = await api.admin.homeAdvertise({

    pageNum: currentPage4.value,
    pageSize: pageSize4.value,

  })
  list.value = res.list
   
   total.value = Number(res.total)
}

const handleCurrentChange = async (val: number) => {
  currentPage4.value = val
  let res = await api.admin.homeAdvertise({

pageNum:currentPage4.value,
pageSize:pageSize4.value,


  })
  list.value = res.list
  total.value = Number(res.total)

  
}
//点击按钮跳转到添加广告页面
let router = useRouter();
function toaddAdvertise() {
  console.log("我要跳转");

  router.push({
    path: "/sms/addAdvertise",
  });
}
//编辑
let write = async () => {
  alert("你是猪")
  router.push({
    path: "/sms/addAdvertise",
  });
  
  
  let res = await api.admin.homeAdvertise({
    code: 0,
    data: {
      clickCount: 0,
      endTime: "",
      id: myid.value,
      name: "",
      note: "",
      orderCount: 0,
      pic: "",
      sort: 0,
      startTime: "",
      status: 0,
      type: 0,
      url: ""
    },
    message: ""
  })
  console.log(res);
  
}

//删除功能
const del = (val:number) => {
  ElMessageBox.confirm(
    '确定要删除该推荐?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then( () => {
    
     
         
        //删除的请求
      api.admin.homenewproductdelete({
            
        ids: val

      })
     
        .then(() => {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          _this.$forceUpdate()
          location.reload()
        })
        .catch(() => { 
          ElMessage({
            type: 'error',
            message: '删除失败',
          })
        })
       
        
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}

//查询搜索
let search = async () => {
  let res = await api.admin.homeAdvertise({
    name:input.value ,
    // type:value.value ,
    // startTime : value2.value,
    pageNum:currentPage4.value,
    pageSize:pageSize4.value,
  })


//交给tableData
// let tableData = getAd
tableData.value.list = res.list;
  //  key.value++
  console.log(tableData.value.list);
  

}
//声明一个数组装东西
let arr = ref([]) as Ref<number[]>
let obj = ref({})
// 选择改变事件
const selectChange = function (param: any[]) {
  arr.value= []
  console.log(param);
   param.forEach(item => {
   arr.value.push(item.id)
    
   });
  
console.log(arr.value);


}
//批量删除
let delall = () => {
  arr.value.forEach(async (item) => {
    await api.admin.homenewproductdelete({
      ids:item
    })
    ElMessage({
    message: '删除成功.',
    type: 'success',
    })
  location.reload()
   })

}
</script>

<style scoped>
.input {
  width: 200px;
  height: 30px;
  margin-left: 20px;
}

.choose {
  margin-left: 20px;
}

.three {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}

.two {
  display: flex;
  justify-content: space-between;
}

.romote {
  margin-top: 20px;
  margin-bottom: 20px;
}
.oublebtn{
  display: flex;
}
img{
  width: 300px;
  height: 200px;
}
.btn1{
  margin-left: 1200px;
}
.bottom{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.bbtn{
  margin-right: 600px;
  margin-top: 3px;
}
</style>
